<template>
  <div class="gov-application-materials">
    <div class="header">
      <el-button v-if="handleType !== 'scan'" type="success" size="mini" @click="add">新增受理条件</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="acceptConditionContent" show-overflow-tooltip label="受理条件内容"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" v-if="handleType !== 'scan'">
          <template slot-scope="scope">
            <el-popconfirm @confirm="delHandle(scope.$index)" title="这是一段内容确定删除吗？">
              <el-button type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <add :visible.sync="visible.add" @addSuccessHandle="addSuccessHandle" />
    </div>
  </div>
</template>

<script>
  import add from './add';
  export default {
    components: { add },
    props: {
      // clone克隆、edit编辑、scan查看
      handleType: {
        type: String
      },
      selected: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    data() {
      return {
        visible: {
          add: false
        },
        tableData: []
      };
    },
    watch: {
      selected: {
        handler(val) {
          this.tableData = JSON.parse(JSON.stringify(val));
        }
      }
    },
    computed: {},
    methods: {
      add() {
        this.visible.add = true;
      },
      addSuccessHandle(data) {
        this.tableData.push(data);
      },
      delHandle(index) {
        this.tableData.splice(index, 1);
      },
      // 获取form数据, isValid是否需要验证，暂存不验证，提交验证
      getFormData(isValid) {
        // 验证
        let valid = true;

        if (isValid && this.tableData.length === 0) {
          valid = false;
        }

        return {
          valid,
          data: this.tableData
        };
      },
      resetField() {
        this.tableData = [];
      }
    },
    created() {},
    mounted() {}
  };
</script>
<style lang="scss">
  .gov-application-materials {
    .header {
      margin-bottom: 20px;
    }
    .el-dialog__footer {
      text-align: center;
    }
  }
</style>
